@php
    /** @var $goods \App\Model\Goods */
@endphp
@extends('home.app')

@section('title', $goods->goods_name)

@section('content')
    @if (!isMobile())
        <style>
            .a167a2._7bc9ee {

            }
        </style>
    @endif
    <div id="slice-pdp" style="z-index: auto;">
        <div class="noTouch ">
            <!--顶部商品信息-->
            <div class="f936e5" itemscope="" itemtype="http://schema.org/IndividualProduct">
                <div class="_298d07 _84390f">
                    @if (isMobile())
                        <div class="e047cc a790be" role="presentation">
                            <img src="{{$goods->getGoodsThumbUrl()}}" alt="" class="a167a2 _7bc9ee">
                            @else
                                <div class="e047cc a790be" role="presentation"
                                     style="width: 350%; transform: translate3d(-42.8571%, 0px, 0px);">
                                    <a href="{{$url}}"><img src="{{$goods->getGoodsThumbUrl()}}" alt="" class="a167a2 _7bc9ee"
                                         style="width: 14.2857%; margin-left: 19%"></a>
                                @endif
                                <!--商品大图-->
                                </div>
                        </div>
                        <span class="bd9e1e" aria-hidden="true"></span>
                        <div class="_9d7de2" aria-label="[Product information]">
                            <div class="cdb2b6" id="bannerComponents-Container">
                                <div class="_1c3e57">
                                    <h1 class="_61cb2e" itemprop="brand" itemscope=""
                                        itemtype="">
                                        <a href="{{$url}}" class="fd9e8e e484bf _4a941d f140b0">
                                            <!--商品名称-->
                                            <span itemprop="name">{{$goods->goods_name}}</span></a>
                                        <!--品牌-->
                                        <span class="b69084">
                                            <span class="_62e534">{{$goods->category->name}}</span>
                                        </span>
                                    </h1>
                                </div>
                            </div>
                            <!--价格-->
                            <div class="bc2ed6"><span><strong
                                        class="d9c839 _62e534">${{$goods->goods_price}}</strong></span></div>
                            <div class="bcd0ad">
                                <div class="_29c35d">
                                    <div class="fp-root ng-scope"
                                         id="FitPredictor-13765419" fp-root=""><!-- ngIf: showApp === true -->
                                        <!-- ngInclude: VIEW.layout.container -->
                                    </div>
                                </div>
                            </div>
                            <!--添加购物车按钮-->
                            <div class=" b404ea">
                                <div class="_3577a3">
                                    <div class="c0b727">
                                        @if (request()->query() && $goods->out_url)
                                            <a href="{{$goods->out_url}}">
                                                <button id="view-product-btn">View Product
                                                </button>
                                            </a>
                                        @else
                                            <form method="post"
                                                  action="{{action('GoodsController@preview', ['cat' => $goods->id])}}">
                                                @csrf
                                                <input type="hidden" name="id" value="{{$goods->id}}">
                                                <button class="_315884 _08896a _4b1322 _3964f8"
                                                >Add to bag
                                                </button>

                                            </form>
                                        @endif

                                    </div>
                                </div>
                            </div>
                            <div id="qubitContainer"></div>
                        </div>
                </div>
                <!--页面导航-->
                <div id="containerCollapser" class="_5dee9f">
                    <ol class="_97d3c4" itemscope=""
                        itemtype="http://schema.org/BreadcrumbList">
                        <li class="_74698a" itemprop="itemListElement" itemscope=""
                            itemtype="http://schema.org/ListItem">
                            <meta itemprop="position" content="1">
                            <a href="/" class="fd9e8e _2f2ff4 cfc654"
                               itemscope="" itemprop="item" itemtype="http://schema.org/Thing"><span
                                    itemprop="name">home</span></a>

                            <span class="fa fa-caret-right" style="color:#b6b6b6"></span>

                        </li>
                        <li class="_74698a" itemprop="itemListElement" itemscope=""
                            itemtype="http://schema.org/ListItem">

                            <a href="{{action('CollectionController@cat', ['cat' => $goods->category->id])}}"
                               class="fd9e8e _2f2ff4 cfc654"
                               itemscope="" itemprop="item"
                               itemtype="http://schema.org/Thing"><span
                                    itemprop="name">{{$goods->category->name}}</span></a>
                        </li>
                    </ol>
                    <!--商品详情-->
                    <div class="_7bbfc8 _62e534" id="collapserDetails">
                        <div class="_19fb94 d1ae32" role="tablist">
                            <div class="a7c1ee">
                                <button class="_27dbe0 cd70e0" id="the-details" aria-expanded="true"
                                        aria-controls="panel-0" role="tab"><span
                                        class="_7252d4 cd70e0 _59d662"
                                    >The Details</span></button>
                            </div>
                            <span class="_91eb25"
                                  style="width: 101px; transform: translate(0px, 1px);"></span>
                            <div class=" " style="min-height: 160px;">
                                <div id="panel-0" class="fd83db _776e41" role="tabpanel"
                                     aria-labelledby="the-details" aria-hidden="false"
                                >
                                    <div id="panelInner-0"><h2 class="_20b562">The Details</h2>
                                        <div class="_81a186">
                                            <!--商品详情内容-->
                                            <div class="_06fd3e">
                                                {!! $goods->detail !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--推荐商品列表-->
                @if ($rec_goods->count() > 0)
                    <div class="_3d7312">
                        <div class="_0a2097" id="shopTheLook">
                            <!--推荐商品列表标题-->
                            <h3 class="b5b400 _59d662">Complete the look</h3>
                            <div class="_37aa21">
                                <!--商品盒子   最多5个-->
                                @foreach ($rec_goods as $good)
                                    <div class="_0f8386">
                                        <div class="a93f18">
                                            <a role="link" tabindex="0"
                                               href="{{request()->query() && $goods->out_url ? $good->out_url : action('GoodsController@info', ['id' => $good->id])}}"
                                               class="d7717f">
                                                <div class="_3ed4e4 _7bf0b5"><img class="_650d79 d8bdd1"
                                                                                  src="{{$good->getGoodsThumbUrl()}}"
                                                                                  aria-hidden="true"
                                                                                  alt="{{$good->goods_name}}">
                                                </div>
                                                <div class="_47c1c4 _68239f _4be54c">
                                                    <div dir="ltr" class="_113454 f140b0 _642060"
                                                    >{{$good->goods_name}}
                                                    </div>
                                                    <span class="abd822"><span
                                                            class="_62e534"
                                                        >${{$good->goods_price}}</span></span>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                            @endforeach

                            <!--商品盒子end -->
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
        <!--底部信息 为何选择该商城-->
        <div class="container">
            <div class="baseline col12 alpha omega mb-l" id="uspContent"
            >
                <div class="usp">
                    <h4 class="usp__title heading-bold font-M">Why Choose Us?</h4>
                    <!--单条信息-->
                    <div class="usp__item">
                        <div class="usp__icon">
                            <!--icon-->
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56">
                                <defs>
                                    <style>.cls-1 {
                                            fill: none;
                                        }

                                        .cls-2 {
                                            fill-rule: evenodd;
                                        }</style>
                                </defs>
                                <title>ic_labels_2</title>
                                <g id="Layer_2">
                                    <g id="Layer_1-2">
                                        <rect class="cls-1" width="56" height="56"></rect>
                                        <path class="cls-2"
                                              d="M46,14v9.17A4,4,0,0,1,44.83,26L26.41,44.41l.18.18a2,2,0,0,0,2.82,0L46.83,27.17A4,4,0,0,0,48,24.34V16A2,2,0,0,0,46,14Z"></path>
                                        <path class="cls-2"
                                              d="M42,10H30.83a2,2,0,0,0-1.42.59l-20,20a2,2,0,0,0,0,2.82L20.59,44.59a2,2,0,0,0,2.82,0l20-20A2,2,0,0,0,44,23.17V12A2,2,0,0,0,42,10Zm-4,8a2,2,0,1,1,2-2A2,2,0,0,1,38,18Z"></path>
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <!--单条信息文字-->
                        <div class="usp__text">
                            <div class="usp__item-title bold">The one that you want? We've got it</div>
                            <div class="usp__item-description">
                                <p>Brands you love and the ones you don't know you love yet. Shop over 100,000
                                    styles.
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="usp__item">
                        <div class="usp__icon usp__icon--world">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56">
                                <defs>
                                    <style>.cls-1 {
                                            fill: none;
                                        }</style>
                                </defs>
                                <title>ic_rating</title>
                                <g id="Layer_2">
                                    <g id="Layer_1-2">
                                        <rect class="cls-1" width="56" height="56"></rect>
                                        <path
                                            d="M29.9,13.2,33.09,23h10.3a2,2,0,0,1,1.17,3.62l-8.33,6.05,3.18,9.8a2,2,0,0,1-3.08,2.24L28,38.65l-8.33,6.06a2,2,0,0,1-3.08-2.24l3.18-9.8-8.33-6.05A2,2,0,0,1,12.61,23h10.3l3.19-9.8A2,2,0,0,1,29.9,13.2Z"></path>
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <div class="usp__text">
                            <div class="usp__item-title bold">4.7/5 stars and 25,000+ reviews</div>
                            <div class="usp__item-description"><p>You know you can trust us.</p></div>
                        </div>
                    </div>

                    <div class="usp__item">
                        <div class="usp__icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56">
                                <defs>
                                    <style>.cls-1 {
                                            fill: none;
                                        }

                                        .cls-2, .cls-3 {
                                            fill: #222;
                                        }

                                        .cls-3 {
                                            fill-rule: evenodd;
                                        }</style>
                                </defs>
                                <title>ic_returns</title>
                                <g id="Layer_2">
                                    <g id="Layer_1-2">
                                        <rect class="cls-1" width="56" height="56"></rect>
                                        <path class="cls-2"
                                              d="M31,13H21.41l2.3-2.29a1,1,0,0,0-1.42-1.42L17.59,14l4.7,4.71a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L21.41,15H31a3,3,0,0,1,3,3,1,1,0,0,0,2,0A5,5,0,0,0,31,13Z"></path>
                                        <path class="cls-3"
                                              d="M28,34l19.4-5.82a2,2,0,0,0-.91-.52l-18-4.5a2,2,0,0,0-1,0l-18,4.56a2,2,0,0,0-.87.47Z"></path>
                                        <path class="cls-3"
                                              d="M28,36,8,30v8.47a2,2,0,0,0,1.43,1.92l18,5.4a2,2,0,0,0,1.14,0l18-5.4A2,2,0,0,0,48,38.51V30Z"></path>
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <div class="usp__text">
                            <div class="usp__item-title bold">Free global returns and pick up</div>
                            <div class="usp__item-description"><p>Changed your mind? No problem.
                                </p></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col12 flexBox align-middle js-adWrapper"
             style="border: 0pt none; width: 970px; height: 90px;"></div>
@endsection
